<template>
    <div>
        <el-card shadow="hover">
            <div slot="header" style="color: #515A6E; font-weight: bold ">
                <span>{{$i18n.t('TODAY_COLLECTION_ORDER_AMOUNT')}}：{{ collection.total }}</span>
            </div>
            <el-table :data="collection.data" border style="width: 100%" :header-cell-style="{background:'#91C7AE', color: '#515A6E'}" v-loading="loading">
                <el-table-column align="center" prop="date"  min-width="150"></el-table-column>
                <el-table-column align="center" prop="day1_rate" :label="$i18n.t('DAY1_REPAYMENT_RATE')" :render-header="renderHeader" min-width="150"></el-table-column>
                <el-table-column align="center" prop="day2_rate" :label="$i18n.t('DAY2_REPAYMENT_RATE')" min-width="150"></el-table-column>
                <el-table-column align="center" prop="day3_rate" :label="$i18n.t('DAY3_REPAYMENT_RATE')" min-width="150"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'CollectionOverview',
        props: {
            collection: {
                type: Object,
                required: true
            },
            loading: {
                type: Boolean,
                required: true
            }
        },
        methods: {
            renderHeader (h, { column }) {
                return h(
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                                props: {
                                    effect: 'dark',
                                    content: this.$t('DAY1_REPAYMENT_TIP'),
                                    placement: 'top',
                                }
                            },
                            [h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;cursor:pointer;'
                            })],
                        )
                    ]
                )
            }
        }
    }
</script>

<style scoped>

</style>
